<template>
  <div class="container">
    <el-card>
      <!-- 面试头部搜索框search -->
      <div class="header">
        <!-- 头部左侧检索条件 -->
        <el-form :inline="true" class="demo-form-inline">
          <el-form-item label="关键字">
            <el-input
              placeholder="根据文章标题搜索"
              v-model.trim="keyword"
            ></el-input>
          </el-form-item>
          <el-form-item label="状态">
            <el-select
              placeholder="请选择状态"
              v-model="state"
              @change="getArticleList()"
            >
              <el-option label="已禁用" value="0"></el-option>
              <el-option label="已启用" value="1"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button
              @click="
                keyword = '';
                state = null;
                getArticleList();
              "
              >清除</el-button
            >
            <el-button type="primary" @click="search">搜索</el-button>
          </el-form-item>
        </el-form>
        <!-- 头部右侧新增按钮 -->
        <div>
          <el-button
            type="success"
            icon="el-icon-edit"
            @click="
              dialogFormVisible = true;
              isShow = true;
            "
            >新增技巧</el-button
          >
          <!-- itemAdd = 1; -->
        </div>
      </div>
      <!-- 数据信息提示 -->
      <el-alert
        :title="'数据一共' + counts + '条'"
        type="info"
        show-icon
        :closable="false"
      >
      </el-alert>
      <!-- 表格数据展示 -->
      <el-table :data="articleList" stripe style="width: 100%">
        <el-table-column type="index" label="序号" width="80">
        </el-table-column>
        <el-table-column label="文章标题" width="400">
          <template slot-scope="scope">
            <span>{{ scope.row.title }}</span>
            <i
              class="el-icon-film"
              v-if="scope.row.videoURL"
              @click="viewVideo(scope.row.videoURL)"
            ></i>
          </template>
        </el-table-column>
        <el-table-column prop="visits" label="阅读数" width="300">
        </el-table-column>
        <el-table-column prop="username" label="录入人" width="300">
        </el-table-column>
        <el-table-column prop="createTime" label="录入时间" width="300">
        </el-table-column>
        <el-table-column label="状态" width="100">
          <template slot-scope="scope">
            <span v-if="scope.row.state === 1">已启用</span>
            <span v-else>已禁用</span>
          </template>
        </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button @click="handleClick(scope.row)" type="text" size="small"
              >预览</el-button
            >
            <el-button type="text" size="small" @click="butClick(scope.row)">
              <span v-if="scope.row.state === 1">禁用</span>
              <span v-else>启用</span>
            </el-button>
            <el-button
              type="text"
              size="small"
              @click="upClick(scope.row)"
              :disabled="scope.row.state === 1 ? true : false"
              :class="scope.row.state === 1 ? 'operation' : ''"
              >修改</el-button
            >
            <el-button
              type="text"
              size="small"
              :disabled="scope.row.state === 1 ? true : false"
              @click="delClick(scope.row)"
              :class="scope.row.state === 1 ? 'operation' : ''"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页 -->
      <el-pagination
        background
        :page-size="pagesize"
        :total="counts"
        :current-page="page"
        :page-sizes="[5, 10, 20, 50]"
        layout="jumper, sizes, next, pager, prev"
        @current-change="currentChange"
        @size-change="sizeChange"
      >
      </el-pagination>
      <!-- 添加/修改 弹出框 -->
      <el-dialog
        :title="isShow ? '新增文章' : '修改文章'"
        :visible.sync="dialogFormVisible"
      >
        <articles-add
          :FormVisible.sync="dialogFormVisible"
          :itemArticle="itemArticle"
        ></articles-add>
        <!-- :itemAdd.sync="itemAdd" -->
      </el-dialog>
      <!-- 预览弹出框 -->
      <el-dialog title="预览文章" :visible.sync="viewVisible">
        <articles-preview
          :viewVisible.sync="viewVisible"
          :itemArticle="itemAdd"
        ></articles-preview>
      </el-dialog>
      <!-- 视频弹出框 -->
      <el-dialog
        title="视频展示"
        :visible.sync="flag"
        class="viewVideo videoHader"
        :show-close="false"
      >
        <!-- 弹出框展示的内容 -->
        <div v-if="flag">
          <!-- 视频地址正确展示 -->
          <video v-if="flage" :src="videoUrl" autoplay></video>
          <!-- 视频地址错误展示 -->
          <div class="imge" v-else>
            <h2>请检查您的视频链接地址</h2>
            <img src="../store/timg.jpg" />
          </div>
        </div>
      </el-dialog>
    </el-card>
  </div>
</template>

<script>
// 导入接口
import { list, changeState, remove } from '@/api/hmmm/articles.js'
// 导入时间格式化
import { setMyDate } from '@/utils/index.js'
// 导入添加文章的子组件
import ArticlesAdd from '../components/articles-add.vue'
import ArticlesPreview from '../components/articles-preview.vue'
export default {
  name: 'Articles',
  data () {
    return {
      // 预览的数据
      itemAdd: null,
      // 是否是一个视频
      flage: false,
      // 视频弹出框的隐藏/显示
      flag: false,
      // 视频播放连接
      videoUrl: '',
      // 当前点击的数据
      itemArticle: null,
      // 预览弹出框的隐藏/显示
      viewVisible: false,
      // 添加弹出框的隐藏/显示
      dialogFormVisible: false,
      // 添加和修改切换显示
      isShow: true,
      // 关键字
      keyword: '',
      // 搜索框当前选中的状态： 1 开启 0 屏蔽
      state: null,
      // 页面上展示的所有数据
      articleList: [],
      // 数据总条数
      counts: 0,
      // 当前页数
      page: 1,
      // 每页显示的数据
      pagesize: 10
    }
  },
  // 注册组件
  components: {
    ArticlesAdd,
    ArticlesPreview
  },
  // 侦听器
  watch: {
    // 侦听弹出框隐藏的时候(false),刷新页面
    dialogFormVisible (newVal, oldVal) {
      if (newVal === false) {
        this.getArticleList()
        this.itemArticle = undefined
      }
    },
    // 侦听预览弹出框关闭时候清空数据
    viewVisible: {
      handler (newVal, oldVal) {
        if (newVal === false) {
          this.itemArticle = undefined
        }
      },
      immediate: true
    }
  },
  // 声明周期函数
  created () {
    this.getArticleList()
  },
  // 方法
  methods: {
    // 点击搜索按钮
    search () {
      this.page = 1
      this.getArticleList()
    },
    // 点击播放视频
    viewVideo (url) {
      const reg = /^https:/
      this.flage = false
      if (reg.test(url)) {
        this.videoUrl = url
        this.flage = true
      }
      this.flag = true
    },
    // 用户改变每页显示的数据触发
    sizeChange (e) {
      this.pagesize = e
      this.getArticleList()
    },
    // 用户改变当前页触发
    currentChange (e) {
      this.page = e
      const str = this.keyword
      if (this.keyword !== '') {
        this.keyword = ''
        this.getArticleList()
      }
      this.$nextTick(() => {
        this.keyword = str
      })
      this.getArticleList()
    },
    // 点击修改
    upClick (article) {
      this.dialogFormVisible = true
      this.isShow = false
      const { id, title, articleBody, videoURL } = article
      this.itemArticle = {
        id, title, articleBody, videoURL
      }
    },
    // 点击预览, 返回一个当前行的数据
    handleClick (article) {
      this.itemAdd = article
      // 让弹出框显示
      this.viewVisible = true
    },
    // 点击禁用/启用
    butClick (article) {
      if (article.state === 1) {
        article.state = 0
      } else {
        article.state = 1
      }
      const data = {
        id: article.id,
        state: article.state
      }
      changeState(data)
      this.getArticleList()
    },
    // 点击删除
    delClick (article) {
      const data = {
        id: article.id
      }
      this.$confirm('此操作将永久删除此文件, 是否继续?', article.title, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        try {
          remove(data)
          this.getArticleList()
          this.$message({
            message: '删除成功',
            type: 'success'
          })
        } catch (error) {
          console.warn(error)
          this.$message({
            message: '删除失败',
            type: 'warning'
          })
        }
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    },
    // 调用接口获取所有数据
    async getArticleList () {
      // 从当前组件结构数据
      const { page, pagesize, state, keyword } = this
      // 配置请求参数
      const data = {
        page,
        pagesize,
        keyword,
        state
      }
      const { data: res } = await list(data)
      res.items.forEach((item, index) => {
        item.index = index + 1
        // 过滤时间
        item.createTime = setMyDate(item.createTime)
      })
      // 数据总条数
      this.counts = res.counts
      // 页面上展示的所有数据
      this.articleList = res.items
    }
  }
}
</script>

<style scoped lang='less'>
.container {
  padding: 10px;
  .el-card {
    // 视频弹出框样式
    .el-dialog__wrapper {
      // /deep/ .el-dialog {
      //   background-color: transparent;
      //   -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0);
      // }
      /deep/ .el-dialog {
        // 弹出框头部
        // /deep/ .el-dialog__header {
        //   height: 0px;
        //   background-color: transparent;
        //   /deep/.el-dialog__title {
        //     height: 0px;
        //     background-color: transparent;
        //   }
        // }
        // 弹出框的主体
        /deep/ .el-dialog__body {
          padding: 0;
          // border-radius: 10px;
          // height: 464px;
          // height: 100;
        }
      }
      video {
        width: 100%;
      }
      .imge {
        position: relative;
        width: 100%;
        padding-left: 3px;
        h2 {
          position: absolute;
          top: 0;
          left: 50%;
          transform: translate(-50%);
        }
        // background: url(../store/timg.jpg);
      }
    }
    // 表头搜索框样式
    .header {
      padding-left: 30px;
      display: flex;
      justify-content: space-between;
    }
    // 消息提示样式
    .el-alert {
      margin-bottom: 20px;
    }
    // 数据表格样式
    /deep/ .el-table {
      // 视频图标
      .el-icon-film {
        color: blue;
        cursor: pointer;
        font-size: 16px;
        margin-left: 10px;
      }
      .el-table_1_column_7 {
        font-size: 16px;
      }
    }
    // 分页定位样式
    .el-pagination {
      display: flex;
      flex-direction: row-reverse;
    }
    // 弹出框样式
    /deep/ .el-dialog {
      width: 42%;
      // 弹出框主体
      /deep/ .el-dialog__body {
        padding: 30px 30px 0 0;
      }
    }
  }
}

// 鼠标经过变圈杠(不可点击)
.operation {
  cursor: not-allowed;
  color: #ccc;
}
</style>
